<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <style type="text/css">
        .table {
            margin: 50px;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<div id="app">
    <h1>作业列表</h1>

    <!--id="container"-->
    <el-button type="primary" @click="addSection=true">布置作业</el-button>
    <el-dialog title="布置作业" :visible.sync="addSection ">
        <el-form :model="notice">
            <el-form-item label="作业题目">
                <el-input style="width: 300px;" v-model="notice.noticeName"></el-input>
            </el-form-item>
            <el-form-item label="作业要求">
                <el-input type="textarea" v-model="notice.noticeInf"></el-input>
            </el-form-item>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    			<el-button @click="addSection  = false">取 消</el-button>
   				<el-button type="primary" @click="sectionAdd">确 定</el-button>
 			 </span>
    </el-dialog>
    <el-dialog title="布置作业修改" :visible.sync="updateWork ">
        <el-form :model="notice">
            <el-form-item label="作业题目">
                <el-input style="width: 300px;" v-model="notice.noticeName"></el-input>
            </el-form-item>
            <el-form-item label="作业要求">
                <el-input type="textarea" v-model="notice.noticeInf"></el-input>
            </el-form-item>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    			<el-button @click="updateWork  = false">取 消</el-button>
   				<el-button type="primary" @click="sectionUpdate1">确 定</el-button>
 			 </span>
    </el-dialog>
    <div class="table">
        <el-table :data="tableData">
            <el-table-column prop="noticeId" label="序号" width="180px">
            </el-table-column>
            <el-table-column prop="noticeName" label="作业名称" width="180px">
            </el-table-column>
            <el-table-column prop="noticeCreateDate" label="发布日期" width="300px" :formatter="dateFormat">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="getDetail(scope.row)">查看详情</el-button>
                    <el-button type="primary" @click="toUpdateSection(scope.row)">修改</el-button>
                    <el-button type="danger" @click="deleteWork(scope.row.noticeId)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!--分页-->
    <div class="block">
        <el-pagination style="text-align: center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
    </div>


</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let _this = new Vue({
        el: '#app',
        data: {
            updateWork: false,
            addSection: false,
            pageIndex: 1,
            pageSize: 5,
            total: 0,
            tableData: [],
            notice: {
                noticeId: null,
                noticeName: null,
                noticeInf: null
            },
        },
        created: function () {
            this.noticeList();
        },
        methods: {
            sectionAdd: function () {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/notice/insert',
                    data: JSON.stringify(this.notice),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                message: res.message,
                                type: 'success'
                            });
                            _this.notice.noticeName = null;
                            _this.notice.noticeInf = null;
                            _this.addSection = false;
                            _this.noticeList();
                        } else {
                            _this.$message({
                                message: res.message,
                                type: 'info'
                            })
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },
            toUpdateSection(notice) {

                $.ajax({
                    type: 'post',
                    url: '/api/teacher/notice/getNoticeById',
                    data: {
                        id: notice.noticeId
                    },
                    success: function (res) {
                        console.log(res)
                        _this.notice.noticeInf = res.resData.noticeInf;
                        _this.notice.noticeName = res.resData.noticeName;
                        _this.notice.noticeId = res.resData.noticeId;
                        _this.updateWork = true;

                    }
                })


            },
            sectionUpdate1() {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/notice/update',
                    data: JSON.stringify(this.notice),
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                message: res.message,
                                type: 'success'
                            });
                            _this.notice.noticeName = null;
                            _this.notice.noticeInf = null;
                            _this.updateWork = false;
                            _this.noticeList();
                        } else {
                            _this.$message({
                                message: res.message,
                                type: 'info'
                            })
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },
            deleteWork: function (id) {
                console.log(1111)
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    type: 'warning',
                    center: true
                }).then(function (value) {
                    $.ajax({
                        type: 'post',
                        url: '/api/teacher/notice/delete',
                        data: {id: id},
                        dataType: 'json',
                        success: function (res) {
                            if (res.status == 200) {

                                _this.$message({
                                    message: res.message,
                                    type: 'success'
                                });
                                _this.noticeList();
                            } else {
                                _this.$message({
                                    message: res.message,
                                    type: 'info'
                                })
                            }
                            ;
                        },
                        error: function (error) {
                            console.log('接口不通' + error);
                        }
                    })
                }).catch(function () {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                })
            },
            /*日期格式化*/
            dateFormat: function (row, column) {
                let val = row[column.property];
                //console.log(date);
                let date = new Date(val);
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            },
            /*分页*/
            handleSizeChange: function (val) {
            }
            ,
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.noticeList();
            }
            ,

            noticeList: function () {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/notice/list',
                    data: {
                        pageIndex: this.pageIndex
                    },
                    success: function (res) {
                        console.log(res)
                        _this.tableData = res.resData.list;
                        _this.total = res.resData.total
                    }
                })
            }
            ,
            getDetail: function (notice) {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/notice/getNoticeById',
                    data: {
                        id: notice.noticeId
                    },
                    success: function (res) {
                        _this.noticeInf = res.resData.noticeInf;
                        _this.noticeName = res.resData.noticeName
                        _this.$alert(_this.noticeInf, _this.noticeName, {
                            confirmButtonText: '确定'
                        })
                    }
                })


            }
        }
    })

</script>
</body>
</html>